<script lang="ts" setup>
import { isNotEmpty } from '@/util/localTool';
import { getImgPath, paramEncode, toast } from '@/util/bussinessTool'
import { onMounted, ref, watch } from 'vue'
import { commonStore } from '@/stores/commonStore/commonStore'
import { useRouter } from 'vue-router';
const props = defineProps({
    dataList: {
        type: Array,
        default: () => []
    },
    show: {
        type: Boolean,
        default: false
    }
})
const emits = defineEmits(['toOrder', 'close'])
const store = commonStore()
let goodNum = 0
let goodList = ref()
let totalPrice = 0
let tabHeight = ref(0)
watch(() => props.dataList, (newVale, oldVale) => {
    goodList.value = []
    props.dataList.forEach((item: any, index: any) => {
        let obj = {
            ...item,
            goodNum: 0
        }
        goodList.value.push(obj)
    })
})
onMounted(() => {
    goodList.value = []
    props.dataList.forEach((item: any, index: any) => {
        let obj = {
            ...item,
            goodNum: 0
        }
        goodList.value.push(obj)
    })
    let height = 0
    let vantTabbar = document.getElementsByTagName('van-tabbar__placeholder')
    if (isNotEmpty(vantTabbar)) {
        height = vantTabbar[0].clientHeight
    }
    tabHeight.value = height
})
const router = useRouter()
function onDetail(value: { id: string }) {
    let query = paramEncode({ id: value.id })
    router.push({ name: 'serviceDetail', query: query })
}
function clear() {
    goodList.value.forEach((item: any, index: string | number) => {
        goodList.value[index].goodNum = 0
    })
    totalPrice = 0
}
function onOrder() {
    let choosed = false
    let list: any[] = []
    goodList.value.forEach((item: { goodNum: number }, index: any) => {
        if (item.goodNum > 0) {
            choosed = true
            list.push(item)
        }
    })
    if (choosed) {
        emits('toOrder', list)
    } else {
        toast('请选择一个项目')
    }
}
function getPrice() {
    let price = 0
    goodList.value.forEach((item: { goodNum: number; price: number }, index: any) => {
        if (item.goodNum > 0) {
            price += item.goodNum * item.price
        }
    })
    totalPrice = price
}
function onDelete(index: string | number) {
    if (goodList.value[index].goodNum === 0) return
    goodList.value[index].goodNum -= 1
    getPrice()
}
function onAdd(index: string | number) {
    if (goodList.value[index].goodNum + 1 > 10) {
        toast('超过最大下单数量')
        return
    }
    goodList.value[index].goodNum += 1
    getPrice()
}
function onClose() {
    emits('close', {})
}
</script>
<template>
    <van-popup v-model:show="props.show" :safe-area-inset-bottom="true" :close-on-popstate="true" position="bottom"
        closed="onClose" class="popup" round teleport="body">
        <img :src="getImgPath('../assets/static/serviceModal/banner4.png')" class="banner">
        <ul class="scroll bg-white">
            <li class="i-px-10" v-for="(data, index) in goodList" :key="index">
                <div class=" service flex items-center">
                    <img class="avatar" :src="getImgPath(data.avatar)" @click="onDetail(data)" />
                    <div class="content  bg-white i-py-10 flex justify-between items-end">
                        <div class="i-ml-10 leading-none" @click="onDetail(data)">
                            <div class="font-bold i-mb-10 i-text-16">{{ data.name }}</div>
                            <div class="flex i-mb-10 items-center  text-gray-200  i-text-13">
                                <div>{{ data.svcMinute }}分钟</div>
                                <div class=" i-mx-5">|</div>
                                <div class=" i-mx-5">({{ data.svcTimes }}人选择)</div>
                            </div>
                            <div class="font-bold leading-none">
                                <span class="i-text-m " :style="{ color: store.themePaycolor }">￥</span>
                                <span class="i-text-g" :style="{ color: store.themePaycolor }">{{ data.price }}</span>
                                <span class="i-text-s i-mx-5 line-through text-gray-200 font-normal">
                                    ￥{{ data.scribePrice }}
                                </span>
                            </div>
                        </div>
                        <div class="flex items-center justify-center i-mr-10">
                            <van-icon name="plus" :color="store.themeColorValue" @click="onAdd(index)" size="21" />
                            <div class="i-mx-10">{{ data.goodNum }}</div>
                            <van-icon name="minus" :color="store.themeColorValue" @click="onDelete(index)" size="21" />
                        </div>
                    </div>
                </div>
            </li>
        </ul>
        <div class="w-full">
            <div class="bg-white flex i-mx-10 i-pt-10 i-pb-20 ">
                <div class="bg-white  flex items-end font-bold i-r-l-6 i-pl-10 i-py-10  text-gray-600"
                    style="width: 70%;">
                    <span class="i-text-15">￥</span>
                    <span class="i-text-25 i-ml-5">{{ totalPrice }}</span>
                </div>
                <div class="text-white text-weight-b i-r-6  py-20  i-text-n text-center w-1/3" @click="onOrder"
                    :class="'i-' + store.themeName">
                    提交订单
                </div>
            </div>
        </div>
        <div :style="{ height: tabHeight + 'px' }" />
    </van-popup>
</template>
<style lang="scss">
.banner {
    width: 375px;
    height: 38px;
}

.popup {
    max-height: 550px;
}

.scroll {
    height: 375px;
    overflow: scroll;
}

.service {
    .avatar {
        flex-shrink: 1;
        width: 70px;
        height: 70px;
        border-radius: 4px;
    }

    .content {
        width: calc(100% - 70px);
    }

    &:not(:nth-last-child(1)) {
        border-bottom-width: 1px;
        --tw-border-opacity: 1;
        border-color: rgba(209, 213, 219, var(--tw-border-opacity));
    }
}
</style>
